<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>流程定义列表</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" th:href="@{/pear/component/pear/css/pear.css}"/>
</head>
<body class="pear-container">
<div class="layui-card" style="height: 98vh">
    <div class="layui-card-header">
        <h3>流程列表</h3>
    </div>
    <div class="layui-card-body">
        <div style="display: flex; flex-wrap: wrap;" id="content">
            <!-- 数据将在这里动态渲染 -->
        </div>
    </div>
</div>

<script th:src="@{/pear/component/layui/layui.js}"></script>
<script th:src="@{/pear/component/pear/pear.js}"></script>
<script th:inline="javascript">
    let baseURL = /*[[@{/}]]*/ '';
    layui.use(['jquery', 'layer'], function () {
        window.$ = layui.jquery; // 将 $ 赋值到全局
        window.layer = layui.layer;

        $.ajax({
            url: baseURL + 'department/session/getDepartmentId', // 后端接口地址
            type: 'get',
            contentType: 'application/json',
            success: function (response) {
                // 发起 AJAX 请求获取数据
                $.ajax({
                    url: baseURL + 'workflow/flowable/processList?departmentId=' + response.data,
                    type: 'get',
                    success: function (result) {
                        if (result.code === 1000) {
                            let dataList = result.data.list;
                            renderDataList(dataList); // 调用渲染函数
                        } else {
                            layer.msg(result.msg, {
                                icon: 2,
                                time: 2000
                            });
                        }
                    },
                    error: function () {
                        layer.msg('请求失败，请稍后再试', {
                            icon: 2,
                            time: 2000
                        });
                    }
                });
            }
        })

        // 渲染数据的函数
        function renderDataList(dataList) {
            let contentDiv = $('#content'); // 获取容器
            contentDiv.empty(); // 清空容器内容

            dataList.forEach(function (item) {
                let html = `
                <div class="layui-col-md4" style="padding: 10px 25px 10px 25px">
                    <div class="layui-card">
                        <div class="layui-card-body" style="height:50px;display:flex;justify-content:space-between;align-items:center;background-color:aliceblue;border: 10px solid #009dff">
                            <h2>${item.name}</h2>
                            <button type="button" class="layui-btn layui-btn-sm" onclick="startProcess('${item.id}')">
                                <i class="layui-icon layui-icon-edit"></i>
                             </button>
                        </div>
                    </div>
                </div>
            `;
                contentDiv.append(html); // 将生成的 HTML 插入到容器中
            });
        }
    });


    function startProcess(id) {
        let loading = layer.load();
        $.ajax({
            url: baseURL + "workflow/processFrom/getFromField",
            data: {
                processDefinitionId: id
            },
            dataType: 'json',
            type: 'get',
            success: function (result) {
                console.log(result.data);
                layer.close(loading);
                if (result.code === 1000) {
                    if (result.data === null) {
                        layer.close(loading);
                        layer.msg("该流程暂未添加表单数据")
                    } else {
                        let processDefinitionId = id;
                        let encodedFormField = encodeURIComponent(result.data.fieldData);
                        window.location.href = `start_process.html?processDefinitionId=${processDefinitionId}&fieldData=${encodedFormField}&formId=${result.data.formId}`;
                    }
                } else {
                    layer.msg(result.msg, {
                        icon: 2,
                        time: 2000
                    });
                }
            },
            error: function () {
                layer.close(loading);
                layer.msg('请求失败，请稍后再试', {
                    icon: 2,
                    time: 2000
                });
            }
        });
    }


</script>
</body>
</html>